<template>
  <div>
    <v-charts :options="options"  style="width:100%;height:400px" autoresize />
  </div>
</template>

<script>

import ECharts from 'vue-echarts/components/ECharts'
import 'echarts/lib/chart/bar'
import 'echarts/lib/chart/line'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/polar'
import 'echarts/lib/component/title.js'
import 'echarts/lib/component/markLine'

export default {
  name: "SchoolTotalClasstime",
  components:{
    'v-charts': ECharts
  },props:{
    date: {
      type: String,
      default: () => []
    },
    names: {
      type: Array,
      default: []
    },
    values: {
      type: Array,
      default: []
    },
  },
  data() {
    return {
      options: {
        color: '#1890FF',
        title: {
          textAlign: 'center',
          x:'center',
          y:'top',
          text: this.title
        },
        tooltip:{},
        grid:{
          show: true,
          bottom:'25%'
        },
        xAxis:{
          axisLabel:{
            interval: 0,
            rotate: 45
          },
          type: 'category',
          data:[]
        },
        yAxis:[
          {
            name:'课时量',
            type:'value',
            min:0
          }
        ],
        series:[{
          name: '总课时',
          type: 'bar',
          data:[],
          markLine:{ // 设置平均线
            symbol: 'none',
            itemStyle : {
              normal : {
                color:'#dc3545',
                label : {
                  show:true
                }
              }
            },

            data:[
              {
                type:"average",
                name:"平均值"
              }
            ]
          },
        }]
      }
    }
  },
  watch:{
    date: function(){
      this.loadData()
    },
    names: function(){
      this.loadData()
    },
    values: function(){
      this.loadData();
    }
  },
  mounted() {
    this.loadData();
  },
  methods: {
    loadData: function(){
      this.options.title.text = this.date + "年 各分院总课时量"
      this.options.xAxis.data = this.names
      this.options.series[0].data = this.values
    }
  }
}
</script>

<style scoped>

</style>